<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据库比对结果</title>
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        disableCheck = true;
    </script>
    <script src="./js/main.js"></script>
    <style>
        .header {
            line-height: 30px;
            padding-top: 10px;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        .info {
            float: left;
            width: 50%;
            padding-left: 10px;
        }

        .header input {
            height: 25px;
            line-height: 25px;
            border: 1px solid #ddd;
            outline: none;
            padding-left: 5px;
            margin-top: 6px;
            font-size: 16px;
        }

        .content {
            padding: 20px 15px;
        }

        h2 {
            line-height: 70px;
        }

        h3 {
            line-height: 50px;
        }

        h4 {
            line-height: 40px;
        }

        ul {
            margin-left: 30px;
        }

        .arrow {
            width: 150px;
            position: absolute;
            top: 60px;
            left: 30%;
            height: 80px;
            background-image: url(./img/flow-right.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <div id="header" class="header clearfix">
        <div class="info from">
            <p>类型：<input type="text" class="info-type" style="border:0;" readonly value="" /></p>
            <p>名称：<input type="text" class="info-name" style="border:0;" readonly value=""></p>
            <p>地址：<input type="text" class="info-addr" style="border:0;" readonly value=""></p>
            <p>数据库：<input type="text" class="info-db" style="border:0;" readonly value=""></p>
            <p>用户名：<input type="text" class="info-user" style="border:0;" readonly value=""></p>
        </div>
        <div class="info to">
            <p>类型：<input type="text" class="info-type" style="border:0;" readonly value="" /></p>
            <p>名称：<input type="text" class="info-name" style="border:0;" readonly value=""></p>
            <p>地址：<input type="text" class="info-addr" style="border:0;" readonly value=""></p>
            <p>数据库：<input type="text" class="info-db" style="border:0;" readonly value=""></p>
            <p>用户名：<input type="text" class="info-user" style="border:0;" readonly value=""></p>
        </div>
        <div class="arrow"></div>
    </div>
    <div id="content" class="content"></div>

    <script>
        var guid1 = queryPara("guid1");
        var guid2 = queryPara("guid2");
        var db1, db2;
        if (!guid1 || !guid2) {
            alert("缺少 guid1 和 guid2 !");
        } else {
            $(init);
        }
        function init() {
            showLoading();
            $.get("config/connections.json?_t=" + new Date().getTime()).done((res) => {
                initInfo(res);
            });
        }
        function initInfo(res) {
            console.log(res);
            for (let index = 0; index < res.length; index++) {
                const element = res[index];
                if (element.Guid == guid1) db1 = element;
                if (element.Guid == guid2) db2 = element;
            }
            if (!db1 || !db2) {
                alert("guid1 或 guid2 参数错误!");
                return;
            }
            var from = $("#header .from");
            var to = $("#header .to");
            from.find(".info-type").val(db1.Type);
            from.find(".info-name").val(db1.Name);
            from.find(".info-addr").val(db1.Addr);
            from.find(".info-db").val(db1.Db);
            from.find(".info-user").val(db1.User);

            to.find(".info-type").val(db2.Type);
            to.find(".info-name").val(db2.Name);
            to.find(".info-addr").val(db2.Addr);
            to.find(".info-db").val(db2.Db);
            to.find(".info-user").val(db2.User);

            showLoading();
            $.get(`./api/MySqlManage/CompareDB?guid1=${guid1}&guid2=${guid2}`).then(res => {
                render(res);
            }).always(hideLoading);
        }
        function render(res) {
            //渲染比对结果
            console.log(res);
            // res.success=false;
            // res.message="测试错误"
            if (!res.success) {
                $("#content").html(res.message).css({
                    "font-size": "20px",
                    "color": "red",
                    "padding-left": "80px",
                    "padding-top": "20px"
                });
                return;
            }
            //渲染
            var content = $("#content");
            content.append('<hr />');
            var tables = res.data.tables;
            var deleteTables = [];
            var addTables = [];
            var updateTables = [];
            for (let index = 0; index < tables.length; index++) {
                const element = tables[index];
                if (element.type == "Delete") deleteTables.push(element.name);
                if (element.type == "Add") addTables.push(element.name);
                if (element.type == "Update") updateTables.push(element);
            }
            content.append('<h2>删除的表</h2>');
            var tmp = deleteTables.join(", ");
            content.append(`<p>${tmp}</p>`);
            content.append('<h2>增加的表</h2>');
            var tmp = addTables.join(",");
            content.append(`<p>${tmp}</p>`);
            content.append('<h2>修改的表</h2>');
            var ulTables = $("<ul />").appendTo(content);
            for (let index = 0; index < updateTables.length; index++) {
                const table = updateTables[index];
                var liTable = $("<li />").appendTo(ulTables);
                $("<h3 />").html(`${index + 1}. ${table.name}`).appendTo(liTable);
                var ulCols = $("<ul />").appendTo(liTable);
                //列
                let columns = table.columns || [];
                let deleteColumns = [];
                let addColumns = []
                let updateColumns = [];
                for (let p = 0; p < columns.length; p++) {
                    const element = columns[p];
                    if (element.type == 'Add') addColumns.push(element.name);
                    if (element.type == 'Delete') deleteColumns.push(element.name);
                    if (element.type == 'Update') updateColumns.push(element);
                }
                var count = 1;
                if (deleteColumns.length > 0) {
                    for (let j = 0; j < deleteColumns.length; j++) {
                        const element = deleteColumns[j];
                        var liCol = $("<li />").appendTo(ulCols);
                        $("<h4 />").html(`${index + 1}.${count++} ${element}(删除列)`).appendTo(liCol);
                    }
                }
                if (addColumns.length > 0) {
                    for (let j = 0; j < addColumns.length; j++) {
                        const element = addColumns[j];
                        var liCol = $("<li />").appendTo(ulCols);
                        $("<h4 />").html(`${index + 1}.${count++} ${element}(新增列)`).appendTo(liCol);
                    }
                }

                for (let i = 0; i < updateColumns.length; i++) {
                    const col = updateColumns[i];
                    var liCol = $("<li />").appendTo(ulCols);
                    $("<h4 />").html(`${index + 1}.${count++} ${col.name}((修改列)`).appendTo(liCol);
                    var ulProps = $("<ul />").appendTo(liCol);
                    var parameters = col.parameters || []
                    for (let j = 0; j < parameters.length; j++) {
                        const para = parameters[j];
                        $("<li />").html(`${para.name}: ${para.value1} => ${para.value2}`).appendTo(ulProps);
                    }
                }
                //索引
                let indexes = table.indexes || [];
                let deleteIndexes = [];
                let addIndexes = []
                let updateIndexes = [];
                for (let p = 0; p < indexes.length; p++) {
                    const element = indexes[p];
                    if (element.type == 'Add') addIndexes.push(element.description);
                    if (element.type == 'Delete') deleteIndexes.push(element.description);
                    if (element.type == 'Update') updateIndexes.push(element);
                }
                var count = 1;
                if (deleteIndexes.length > 0) {
                    for (let j = 0; j < deleteIndexes.length; j++) {
                        const element = deleteIndexes[j];
                        var liCol = $("<li />").appendTo(ulCols);
                        $("<h4 />").html(`${index + 1}.${count++} ${element}(删除索引)`).appendTo(liCol);
                    }
                }
                if (addIndexes.length > 0) {
                    for (let j = 0; j < addIndexes.length; j++) {
                        const element = addIndexes[j];
                        var liCol = $("<li />").appendTo(ulCols);
                        $("<h4 />").html(`${index + 1}.${count++} ${element}(新增索引)`).appendTo(liCol);
                    }
                }

                for (let i = 0; i < updateIndexes.length; i++) {
                    const col = updateIndexes[i];
                    var liCol = $("<li />").appendTo(ulCols);
                    $("<h4 />").html(`${index + 1}.${count++} ${col.description}(修改索引)`).appendTo(liCol);
                    var ulProps = $("<ul />").appendTo(liCol);
                    var parameters = col.parameters || []
                    for (let j = 0; j < parameters.length; j++) {
                        const para = parameters[j];
                        $("<li />").html(`${para.name}: ${para.value1} => ${para.value2}`).appendTo(ulProps);
                    }
                }
            }

        }</script>
</body>

</html>